// 设置时间
setInterval(function () {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    // const currentTime = getCurrentTimeFormatted();
    document.querySelector('.time').innerHTML = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}, 500)
// 发送请求
async function getReg(url) {
    let res = await axios({ url: url })
    let data = res.data.data
    return data
}
// 地区销量趋势
function rander() {
    getReg('http://8.138.119.204:8182/api/trend?type=map').then(res => {
        let chart = echarts.init(document.querySelector('.chart'), 'dark')
        // console.log(res);
        document.querySelector('.title').innerHTML = res.title
        // 提取 series 中的名称作为图例数据
        let legendData = res.series.map(item => item.name);
        // console.log(legendData);
        // 提取 series 中的数据作为折线图数据
        let lineData = res.series.map(item => item.data);
        // console.log(lineData[0]);
        option = {
            title: {
                text: `单位${res.unit}`,
                left: '8%',
                top: '10%',
                textStyle: {
                    fontSize: 12,
                    color: '#5B5C5F'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top: '5',
                right: '1',
                data: legendData,
                itemWidth: 10, // 图例项宽度变小
                itemHeight: 10, // 图例项高度变小
                textStyle: {
                    fontSize: 10,// 图例项文本字体变小
                    color: 'white'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: res.xAxis.map(item => item),
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'white' // 线的颜色设为白色，可按需更改
                        },
                        textStyle: {
                            color: 'white'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'white' // 线的颜色设为白色，可按需更改
                        },
                        textStyle: {
                            color: 'white'
                        }
                    }
                }
            ],
            series: [
                {
                    name: legendData[0],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[0]
                },
                {
                    name: legendData[1],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[1]
                },
                {
                    name: legendData[2],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[2]
                },
                {
                    name: legendData[3],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[3]
                },
                {
                    name: legendData[4],
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: false
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[4]
                }
            ]
        };
        chart.setOption(option)
    })
}
rander()
// 商家销售量统计
getReg('http://8.138.119.204:8182/api/seller').then(res => {
    let two = echarts.init(document.querySelector('.two'), 'dark')
    // 使用slice方法拆分数组
    let group1 = res.slice(0, 6);
    let group2 = res.slice(6);
    // 定义每组数据显示的时长（单位毫秒），这里设置为5秒，可根据需求调整
    const displayDuration = 5000;
    option = {
        grid: {
            left: '5%',
            right: '10%',
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: 'white' // 线的颜色设为白色，可按需更改
                },
                textStyle: {
                    color: 'white'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: group1.map(ele => ele.name),
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: 'white' // 线的颜色设为白色，可按需更改
                },
                textStyle: {
                    color: 'white'
                }
            }
        },
        series: [
            {
                data: group1.map(ele => ele.value),
                type: 'bar',
                barWidth: 12,

                itemStyle: {
                    color: '#779AA0'
                },

            }
        ]
    };
    two.setOption(option)
    // 定义变量记录当前显示的组，初始为group1
    let currentGroup = group1;
    // 定义切换显示组的函数
    function switchGroup() {
        if (currentGroup === group1) {
            currentGroup = group2;
            two.setOption({
                yAxis: {
                    data: group2.map(ele => ele.name)
                },
                series: [
                    {
                        data: group2.map(ele => ele.value)
                    }
                ]
            });
        } else {
            currentGroup = group1;
            two.setOption({
                yAxis: {
                    data: group1.map(ele => ele.name)
                },
                series: [
                    {
                        data: group1.map(ele => ele.value)
                    }
                ]
            });
        }
        // 设置下一次切换的定时器
        setTimeout(switchGroup, displayDuration);
    }
    // 启动第一次切换的定时器
    setTimeout(switchGroup, displayDuration);
})
// 销量排行榜
getReg('http://8.138.119.204:8182/api/rank').then(res => {
    let bottom = echarts.init(document.querySelector('.bottom'), 'dark')
    // 初始显示的11个数据
    let displayData = res.slice(0, 11);
    // 剩余的10个数据作为备用数据池
    let remainingData = res.slice(11);
    // 用于记录当前遍历到data数组的索引位置，初始为0
    let dataIndex = 0;
    option = {
        title: {
            text: '销售金额(万)',
            left: '5%',
            top: '5%',
            textStyle: {
                fontSize: 12,
                color: '#5B5C5F'
            }
        },
        xAxis: {
            type: 'category',
            data: displayData.map(ele => ele.name),
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: 'white' // 线的颜色设为白色，可按需更改
                },
                textStyle: {
                    color: 'white'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: 'white' // 线的颜色设为白色，可按需更改
                },
                textStyle: {
                    color: 'white'
                }
            }
        },
        series: [
            {
                data: displayData.map(ele => ele.value),
                type: 'bar',
                itemStyle: {
                    color: '#90CA8E'
                }
            }
        ]
    };

    bottom.setOption(option)
    // 使用定时器每隔一定时间更新数据，这里假设每隔2秒更新一次，可按需调整
    setInterval(() => {
        if (remainingData.length > 0) {
            // 删除前11个数据里最前面的那个
            displayData.shift();
            // 添加10个里对应的一个
            displayData.push(remainingData.shift());
            bottom.setOption({
                xAxis: {
                    data: displayData.map(ele => ele.name)
                },
                series: [
                    {
                        data: displayData.map(ele => ele.value)
                    }
                ]
            });
        } else {
            // 当备用数据添加完后，开始重新遍历原始的21个数据
            if (dataIndex < res.length) {
                displayData.shift();
                displayData.push(res[dataIndex]);
                dataIndex++;
                if (dataIndex === res.length) {
                    dataIndex = 0;
                }
                bottom.setOption({
                    xAxis: {
                        data: displayData.map(ele => ele.name)
                    },
                    series: [
                        {
                            data: displayData.map(ele => ele.value)
                        }
                    ]
                });
            }
        }
    }, 2000);
})
// 商户分布与销售排行
getReg('http://8.138.119.204:8182/api/points').then(async res => {
    let top = echarts.init(document.querySelector('.top'), 'dark')
    async function fwq() {
        return res.map(item => {
            return {
                name: item.name, value: parseInt(item.value[0] - item.value[1]),
            }
        })
    }
    var mapName = 'china'
    var data = [
        { name: "北京", value: 0 },
        { name: "天津", value: 0 },
        { name: "河北", value: 0 },
        { name: "山西", value: 0 },
        { name: "内蒙古", value: 0 },
        { name: "辽宁", value: 0 },
        { name: "吉林", value: 0 },
        { name: "黑龙江", value: 0 },
        { name: "上海", value: 0 },
        { name: "江苏", value: 0 },
        { name: "浙江", value: 0 },
        { name: "安徽", value: 0 },
        { name: "福建", value: 0 },
        { name: "江西", value: 0 },
        { name: "山东", value: 0 },
        { name: "河南", value: 0 },
        { name: "湖北", value: 0 },
        { name: "湖南", value: 0 },
        { name: "重庆", value: 0 },
        { name: "四川", value: 0 },
        { name: "贵州", value: 0 },
        { name: "云南", value: 0 },
        { name: "西藏", value: 0 },
        { name: "陕西", value: 0 },
        { name: "甘肃", value: 0 },
        { name: "青海", value: 0 },
        { name: "宁夏", value: 0 },
        { name: "新疆", value: 0 },
        { name: "广东", value: 0 },
        { name: "广西", value: 0 },
        { name: "海南", value: 0 },
    ];
    const provinceCapitalMap = {
        "武汉": "湖北",
        "丹东": "辽宁",
        "张家口": "河北",
        "深圳": "广东",
        "西安": "陕西",
        "成都": "四川",
        "金华": "浙江",
    };
    // 使用await等待sum函数执行完成并获取结果赋值给a
    let sumList = await fwq();
    // 更新data数组中的value属性
    sumList.forEach(sumItem => {
        // 根据provinceCapitalMap找到对应的省会城市名称
        const capitalCity = provinceCapitalMap[sumItem.name];
        // console.log(capitalCity);
        if (capitalCity) {
            // 在data数组中找到对应的省会城市对象
            const dataItem = data.find(item => item.name === capitalCity);
            if (dataItem) {
                // 更新data数组中的value属性
                dataItem.value = sumItem.value;
            }
        }
    });
    // console.log(data);
    var geoCoordMap = {};

    /*获取地图数据*/
    top.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    top.hideLoading();
    mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
        // console.log("部分地理坐标信息示例：", Object.entries(geoCoordMap));
    });
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    };
    option = {
        visualMap: {
            type: 'piecewise',
            show: true,
            min: 0,
            max: 100,
            left: '10%',
            top: 'bottom',
            calculable: true,
            seriesIndex: [1],
            inRange: {
                color: ['#ccc', '#999']
            },
            splitList: [{
                gt: 0,
                lte: 25,
                color: '#F5222D',
                label: '白银客户'
            },
            {
                gte: 25,
                lte: 70,
                color: '#FADE66 ',
                label: '黄金客户'
            },
            {
                gte: 70,
                lte: 100,
                color: '#FA8C16',
                label: '砖石客户'
            },
            ]
        },
        geo: {
            show: true,
            map: mapName,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#023677',
                    borderColor: '#1180c7',
                },
                emphasis: {
                    areaColor: '#FFB248',
                }
            }
        },
        series: [
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: data
            },
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 6,
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                // 点的大小
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'left',
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        // color: '#fff',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                // visualMapIndex: 2,
                zlevel: 1
            },
        ]
    };
    top.setOption(option)
})
// 热销商品销售金额占比统计
getReg('http://8.138.119.204:8182/api/commodity').then(res => {
    let right = echarts.init(document.querySelector('.right'), 'dark')
    option = {
        title: [
            {
                text: '女装',
                left: '13%',
                bottom: '15%',
                textStyle: {
                    color: 'white',
                    fontSize: 12
                }
            },
            {
                text: '手机数码',
                left: 'center',
                bottom: '15%',
                textStyle: {
                    color: 'white',
                    fontSize: 12
                }
            },
            {
                text: '美妆护肤',
                right: '10%',
                bottom: '15%',
                textStyle: {
                    color: 'white',
                    fontSize: 12
                }
            }
        ],
        tooltip: {
            trigger: 'item',
        },
        series: [
            {
                left: '5',
                width: '30%',
                type: 'pie',
                radius: '50%',
                label: {
                    textStyle: {
                        fontSize: 10 // 这里设置文字大小，可以根据需求调整
                    }
                },
                data: res[0].children.map(ele => {
                    return { value: ele.value, name: ele.name }
                }),
                // labelLine: {
                //     length: 0.1,
                //     show: true
                // },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                left: 'center',
                width: '30%',
                type: 'pie',
                radius: '50%',
                label: {
                    textStyle: {
                        fontSize: 10 // 这里设置文字大小，可以根据需求调整
                    }
                },
                data: res[1].children.map(ele => {
                    return { value: ele.value, name: ele.name }
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                left: '',
                width: '30%',
                type: 'pie',
                radius: '50%',
                label: {
                    textStyle: {
                        fontSize: 10 // 这里设置文字大小，可以根据需求调整
                    }
                },
                data: res[2].children.map(ele => {
                    return { value: ele.value, name: ele.name }
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    right.setOption(option)
})
// 库存销售量
getReg('http://8.138.119.204:8182/api/stock').then(res => {
    let sales_bottom = echarts.init(document.querySelector('.sales_bottom'), 'dark')
    // console.log(data);
    let name = res.map(ele => ele.name)
    let stock = res.map(ele => ele.stock)
    let sales = res.map(ele => ele.sales)
    option = {
        series: [
            {
                radius: '45%',
                center: ['20%', '30%'],
                title: {
                    fontSize: '10',
                    color: 'white',
                    offsetCenter: ["0", "-25%"]
                },
                type: 'gauge',
                min: '0',
                max: stock[0],
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.2, '#91CA8C'],
                            [0.8, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'red'
                    }
                },
                axisTick: {
                    distance: -2,
                    length: 5,
                    lineStyle: {
                        color: '#759AA0',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -2,
                    length: 10,
                    lineStyle: {
                        color: '#759AA0',
                        width: 4
                    }
                },

                axisLabel: {
                    color: 'inherit',
                    distance: 10,
                    fontSize: 5,

                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    fontSize: 10,
                    color: 'inherit'
                },
                data: [
                    {
                        name: name[0],
                        value: sales[0]
                    }
                ]
            },
            {
                radius: '45%',
                center: ['50%', '30%'],
                title: {
                    fontSize: '10',
                    color: 'white',
                    offsetCenter: ["0", "-25%"]
                },
                type: 'gauge',
                min: '0',
                max: stock[1],
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.2, '#91CA8C'],
                            [0.8, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'red'
                    }
                },
                axisTick: {
                    distance: -2,
                    length: 5,
                    lineStyle: {
                        color: '#759AA0',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -2,
                    length: 10,
                    lineStyle: {
                        color: '#759AA0',
                        width: 4
                    }
                },

                axisLabel: {
                    color: 'inherit',
                    distance: 10,
                    fontSize: 5,

                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    fontSize: 10,
                    color: 'inherit'
                },
                data: [
                    {
                        name: name[1],
                        value: sales[1]
                    }
                ]
            },
            {
                radius: '45%',
                center: ['79%', '30%'],
                title: {
                    fontSize: '10',
                    color: 'white',
                    offsetCenter: ["0", "-25%"]
                },
                type: 'gauge',
                min: '0',
                max: stock[2],
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.2, '#91CA8C'],
                            [0.8, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'red'
                    }
                },
                axisTick: {
                    distance: -2,
                    length: 5,
                    lineStyle: {
                        color: '#759AA0',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -2,
                    length: 10,
                    lineStyle: {
                        color: '#759AA0',
                        width: 4
                    }
                },

                axisLabel: {
                    color: 'inherit',
                    distance: 10,
                    fontSize: 5,

                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    fontSize: 10,
                    color: 'inherit'
                },
                data: [
                    {
                        name: name[2],
                        value: sales[2]
                    }
                ]
            },
            {
                radius: '45%',
                center: ['35%', '75%'],
                title: {
                    fontSize: '10',
                    color: 'white',
                    offsetCenter: ["0", "-25%"]
                },
                type: 'gauge',
                min: '0',
                max: stock[3],
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.2, '#91CA8C'],
                            [0.8, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'red'
                    }
                },
                axisTick: {
                    distance: -2,
                    length: 5,
                    lineStyle: {
                        color: '#759AA0',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -2,
                    length: 10,
                    lineStyle: {
                        color: '#759AA0',
                        width: 4
                    }
                },

                axisLabel: {
                    color: 'inherit',
                    distance: 10,
                    fontSize: 5,

                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    fontSize: 10,
                    color: 'inherit'
                },
                data: [
                    {
                        name: name[3],
                        value: sales[3]
                    }
                ]
            },
            {
                radius: '45%',
                center: ['65%', '75%'],
                title: {
                    fontSize: '10',
                    color: 'white',
                    offsetCenter: ["0", "-25%"]
                },
                type: 'gauge',
                min: '0',
                max: stock[4],
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.2, '#91CA8C'],
                            [0.8, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'red'
                    }
                },
                axisTick: {
                    distance: -2,
                    length: 5,
                    lineStyle: {
                        color: '#759AA0',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -2,
                    length: 10,
                    lineStyle: {
                        color: '#759AA0',
                        width: 4
                    }
                },

                axisLabel: {
                    color: 'inherit',
                    distance: 10,
                    fontSize: 5,

                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}',
                    fontSize: 10,
                    color: 'inherit'
                },
                data: [
                    {
                        name: name[4],
                        value: sales[4]
                    }
                ]
            }
        ]
    };
    sales_bottom.setOption(option)
})
// 点击放大
let box = document.querySelector('.top-layer-box')
// 第一个版块放大
document.querySelector('.da').addEventListener('click', function (e) {
    e.preventDefault()
    e.stopPropagation()
    box.style.display = 'block';

    getReg('http://8.138.119.204:8182/api/trend?type=map').then(res => {
        box.innerHTML = ''
        const box1 = document.createElement('div')
        box1.style.width = '1200px'
        box1.style.height = '900px'
        box.append(box1)

        let chart = echarts.init(box1, 'dark')
        // console.log(res);
        document.querySelector('.title').innerHTML = res.title
        // 提取 series 中的名称作为图例数据
        let legendData = res.series.map(item => item.name);
        // console.log(legendData);
        // 提取 series 中的数据作为折线图数据
        let lineData = res.series.map(item => item.data);
        // console.log(lineData[0]);
        option = {
            title: {
                text: `单位${res.unit}`,
                left: '8%',
                top: '10%',
                textStyle: {
                    fontSize: 12,
                    color: '#5B5C5F'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top: '5',
                right: '1',
                data: legendData,
                itemWidth: 10, // 图例项宽度变小
                itemHeight: 10, // 图例项高度变小
                textStyle: {
                    fontSize: 10,// 图例项文本字体变小
                    color: 'white'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: res.xAxis.map(item => item),
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'white' // 线的颜色设为白色，可按需更改
                        },
                        textStyle: {
                            color: 'white'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'white' // 线的颜色设为白色，可按需更改
                        },
                        textStyle: {
                            color: 'white'
                        }
                    }
                }
            ],
            series: [
                {
                    name: legendData[0],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[0]
                },
                {
                    name: legendData[1],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[1]
                },
                {
                    name: legendData[2],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[2]
                },
                {
                    name: legendData[3],
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[3]
                },
                {
                    name: legendData[4],
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: false
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: lineData[4]
                }
            ]
        };
        chart.setOption(option)
    })
})
// 地图放大
document.querySelector('.da2').addEventListener('click', function (e) {
    e.preventDefault()
    e.stopPropagation()
    box.style.display = 'block';

    getReg('http://8.138.119.204:8182/api/points').then(async res => {
        box.innerHTML = ''
        const box1 = document.createElement('div')
        box1.style.width = '1200px'
        box1.style.height = '900px'
        box.append(box1)

        let top = echarts.init(box1, 'dark')
        async function fwq() {
            return res.map(item => {
                return {
                    name: item.name, value: parseInt(item.value[0] - item.value[1]),
                }
            })
        }
        var mapName = 'china'
        var data = [
            { name: "北京", value: 0 },
            { name: "天津", value: 0 },
            { name: "河北", value: 0 },
            { name: "山西", value: 0 },
            { name: "内蒙古", value: 0 },
            { name: "辽宁", value: 0 },
            { name: "吉林", value: 0 },
            { name: "黑龙江", value: 0 },
            { name: "上海", value: 0 },
            { name: "江苏", value: 0 },
            { name: "浙江", value: 0 },
            { name: "安徽", value: 0 },
            { name: "福建", value: 0 },
            { name: "江西", value: 0 },
            { name: "山东", value: 0 },
            { name: "河南", value: 0 },
            { name: "湖北", value: 0 },
            { name: "湖南", value: 0 },
            { name: "重庆", value: 0 },
            { name: "四川", value: 0 },
            { name: "贵州", value: 0 },
            { name: "云南", value: 0 },
            { name: "西藏", value: 0 },
            { name: "陕西", value: 0 },
            { name: "甘肃", value: 0 },
            { name: "青海", value: 0 },
            { name: "宁夏", value: 0 },
            { name: "新疆", value: 0 },
            { name: "广东", value: 0 },
            { name: "广西", value: 0 },
            { name: "海南", value: 0 },
        ];
        const provinceCapitalMap = {
            "武汉": "湖北",
            "丹东": "辽宁",
            "张家口": "河北",
            "深圳": "广东",
            "西安": "陕西",
            "成都": "四川",
            "金华": "浙江",
        };
        // 使用await等待sum函数执行完成并获取结果赋值给a
        let sumList = await fwq();
        // 更新data数组中的value属性
        sumList.forEach(sumItem => {
            // 根据provinceCapitalMap找到对应的省会城市名称
            const capitalCity = provinceCapitalMap[sumItem.name];
            // console.log(capitalCity);
            if (capitalCity) {
                // 在data数组中找到对应的省会城市对象
                const dataItem = data.find(item => item.name === capitalCity);
                if (dataItem) {
                    // 更新data数组中的value属性
                    dataItem.value = sumItem.value;
                }
            }
        });
        // console.log(data);
        var geoCoordMap = {};

        /*获取地图数据*/
        top.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        top.hideLoading();
        mapFeatures.forEach(function (v) {
            // 地区名称
            var name = v.properties.name;
            // 地区经纬度
            geoCoordMap[name] = v.properties.cp;
            // console.log("部分地理坐标信息示例：", Object.entries(geoCoordMap));
        });
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        };
        option = {
            visualMap: {
                type: 'piecewise',
                show: true,
                min: 0,
                max: 100,
                left: '10%',
                top: 'bottom',
                calculable: true,
                seriesIndex: [1],
                inRange: {
                    color: ['#ccc', '#999']
                },
                splitList: [{
                    gt: 0,
                    lte: 25,
                    color: '#F5222D',
                    label: '白银客户'
                },
                {
                    gte: 25,
                    lte: 70,
                    color: '#FADE66 ',
                    label: '黄金客户'
                },
                {
                    gte: 70,
                    lte: 100,
                    color: '#FA8C16',
                    label: '砖石客户'
                },
                ]
            },
            geo: {
                show: true,
                map: mapName,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#023677',
                        borderColor: '#1180c7',
                    },
                    emphasis: {
                        areaColor: '#FFB248',
                    }
                }
            },
            series: [
                {
                    type: 'map',
                    map: mapName,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 6,
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    // 点的大小
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'left',
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            // color: '#fff',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    // visualMapIndex: 2,
                    zlevel: 1
                },
            ]
        };
        top.setOption(option)
    })
})

// 添加全局点击事件监听
document.addEventListener('click', function (event) {
    const target = event.target;
    if (!box.contains(target)) {
        box.style.display = 'none';
    }
});